<template>
  <div class="target_item" :ref="dropNode">
    <div class="item_stick" :style="`background-image: url(${props.url})`">
      <div class="box" v-if="props.text">
        <div class="item_text" :class="'text' + num">
          {{ props.text }}
        </div>
        <img :src="imgList[num]" :class="'item' + num" />
      </div>
    </div>
  </div>
</template>
<script setup>
import third1 from "@/assets/third/third1.png";
import third2 from "@/assets/third/third2.png";
import third3 from "@/assets/third/third3.png";
import third4 from "@/assets/third/third4.png";
import { useDrop } from "vue3-dnd";
const imgList = [third1, third2, third3, third4];

const props = defineProps({
  text: String,
  url: String,
  type: String,
  order: Number,
  num: [Number, String],
  onDrop: Function,
});
const [collect, dropNode] = useDrop(() => {
  const { type: accept, onDrop } = props || {};
  return {
    accept,
    drop: onDrop,
  };
});
</script>
<style lang="less" scoped>
.target_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .item_stick {
    position: relative;
    margin-bottom: 20px;
    width: 315px;
    height: 368px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .box {
      position: absolute;
      left: 85px;
      top: -65px;
      width: 145px;
      height: 145px;
      border-radius: 28.76px;
      background: #ffffff;
      margin-top: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      .item_text {
        position: absolute;
        left: -7px;
        top: -30px;
        width: 158px;
        height: 55px;
        line-height: 55px;
        border-radius: 40px;
        opacity: 1;
        background: #ffffff;
        box-sizing: border-box;
        border: 2px solid #a48989;
        font-family: FZLanTingYuanS-R-GB;
        font-size: 34px;
        font-weight: normal;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.09em;
        font-variation-settings: "opsz" auto;
      }
      .text2 {
        left: -25px;
        width: 188px;
      }
      .item0 {
        width: 97px;
        height: 75px;
      }
      .item1 {
        width: 44px;
        height: 107px;
        margin-top: 20px;
      }
      .item2 {
        width: 57px;
        height: 92px;
        margin-top: 20px;
      }
      .item3 {
        width: 91px;
        height: 96px;
        margin-top: 20px;
      }
    }
  }
}
</style>
